/*
 * @Descripttion: 文件说明
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-12-21 15:55:44
 * @LastEditors: GW
 * @LastEditTime: 2021-12-27 11:23:20
 */

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
// 时间戳保证不会版本重复
const VERSION = new Date().getTime();
module.exports = {
    productionSourceMap: false,
    lintOnSave: false,
    // 配置反向代理
    devServer: {
        proxy: {
            '/api': {
                target: 'https://api.sibanyun.com/',
                // target: 'http://172.31.120.158:8080/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    css: {
        extract: {
            // 修改打包后css文件名   // css打包文件，添加时间戳
            filename: `css/[name].${VERSION}.css`,   // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
            chunkFilename: `css/[name].${VERSION}.css`
        }
    },
    configureWebpack: config => {
        // config.entry.app = ["babel-polyfill", "./src/main.js"];
        // if (process.env.NODE_ENV !== 'production') return;
        return {
            output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
                filename: `js/[name].${VERSION}.js`,
                chunkFilename: `js/[name].${VERSION}.js`
            },
            plugins: [
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    // deleteOriginalAssets: false,//删除源文件
                    minRatio: 0.8
                })
            ],
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.esm.js'
                }
            },
            externals: {
                /**
                 * 这里采用Object的形式
                 * 更多的形式参考(https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx)
                 * key: 依赖包的名字
                 * value: 依赖包挂载在项目中的变量名
                 * 挂载的变量必须与依赖包中挂载的一样，在项目中使用也是这个变量名
                 */
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'ant-design-vue': 'antd',
                "moment": "moment",
                "echarts": "echarts",
                "vue-echarts": "VueECharts",
                "lodash": "_",
                "$$":"jquery"
            },
            optimization: {
                splitChunks: {
                    cacheGroups: {
                        vendor: {
                            chunks: 'all',
                            test: /node_modules/,
                            name: 'vendor',
                            minChunks: 1,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 100
                        },
                        common: {
                            chunks: 'all',
                            test: /[\\/]src[\\/]js[\\/]/,
                            name: 'common',
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 60
                        },
                        styles: {
                            name: 'styles',
                            test: /\.(sa|sc|c)ss$/,
                            chunks: 'all',
                            enforce: true
                        },
                        runtimeChunk: {
                            name: 'manifest'
                        }
                    }
                }
            }
        }

    },
    transpileDependencies: [
        'vue-echarts',
        'resize-detector'
    ],
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')

        // 清除已有的所有 loader。
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear()

        // 添加要替换的 loader
        svgRule.use('vue-svg-loader').loader('vue-svg-loader')
    }
}